import { Button } from 'antd';
import React, { useEffect, useState } from 'react';
import AboutStyle from '../css/About.less';
import { useModel, useAccess } from '@umijs/max';

const ParentApp = () => {
  const { counter, increment } = useModel('count');
  return (
    <>
      <div>当前的值{counter}</div>
      <Button onClick={increment}>增加</Button>
    </>
  );
};

const ChildApp = () => {
  const { counter, decrement } = useModel('count');
  const [nums, setNums] = useState([1, 2, 3]);

  // 监听counter触发
  useEffect(() => {
    console.log('监听到counter变化');
    setNums((pre) => {
      return [...pre, counter];
    });
  }, [counter]);

  return (
    <>
      <div>当前的值{counter}</div>
      <Button onClick={decrement}>减少</Button>
      <ul>
        {nums.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </>
  );
};

const PageName: React.FC = () => {
  const access = useAccess();

  // 页面加载执行一次
  useEffect(() => {
    console.log('执行一次');
    console.log(access, '用户权限');
  }, []);

  const testFun = (...args) => {
    let key = args.pop();
    console.log(args);
    console.log(key);
  };

  return (
    <>
      <div className={AboutStyle.cusSize}>Hello World</div>
      <Button style={{ width: 200 }} type={'primary'} onClick={() => testFun('a1', 'a2', 'a3', 4)}>
        button
      </Button>

      <ParentApp />

      <ChildApp />

      {access.canAdmin && <Button>这是管理才能看到的按钮</Button>}

      <div
        style={{
          height: '50%',
          width: '50%',
          backgroundColor: 'red',
        }}
        className={'flex justify-around items-center container'}
      >
        <div>A</div>
        <div>B</div>
        <div>C</div>
      </div>
    </>
  );
};

export default PageName;
